<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>人脸系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.avatar {
			width: 180px;
			height: 180px;
		}

		.hhr {
			height: 1px;
			background-color: #bdbdbd;
			border: none;
			margin: 10px 7.5%;
		}

		.m-div {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
			background-color: rgba(62, 62, 62, 0.5);
			color: #000;
		}

		img.avatar {
			width: 140px;
			height: 210px;

		}
	</style>
</head>

<body>
	<div id="app">

		<div class="header">
			<div class="header_title">人脸数据</div>
			<a onclick="history.back()">
				<img src="image/return.png" alt="" class="return">
			</a>
		</div>

		<br>

		<div style="text-align: center;padding: 55px 0 25px">
			<img :src="img" class="avatar" @click="upload" />
		</div>

		<hr class="hhr" />

		<div style="font-size: 12px;letter-spacing:2px;line-height: 150%;text-indent:3em">
			<div style="font-size: 13px;line-height: 250%;">人脸上传标准:</div>
			<div>1.请勿使用美颜功能并在拍照时请勿遮挡脸部。</div>
			<div>2.建议竖屏拍照。</div>
			<div>3.请在光线良好的场景进行拍摄。</div>
			<div>4.请按照图片展示要求进行拍摄。</div>
		</div><br />

		<div style="text-align: center;margin: 0 6% 0 14%">
			<img src="image/renlianshili.png" style="max-width: 80%;" />
		</div><br />

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/wechat/js/wx.js"></script>


	<script>
		function store(student) {
			sessionStorage['hxt-student'] = JSON.stringify(student);
		}
		new Vue({
			el: '#app',
			data: {
				student: getStudent(),
			},
			methods: {
				upload: function () {
					wxChooseImg(1, 'binding', this.setAvatar);
				},
				setAvatar: function (avatar) {
					axios.post('/s/binding', toFormParams({ avatar: avatar })).then(function (res) {
						this.student.avatar = avatar;
						store(this.student);
					}.bind(this));
				}
			},
			computed: {
				img: function () {
					var avatar = this.student.avatar;
					if (!avatar) return 'image/renlian.png';
					return '/static/' + this.student.schoolId + '/binding/' + avatar;
				}
			}
		})
	</script>
</body>

</html>